<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="./stylesheets/style.css">
    <!-- Angular-->
<script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.1/angular.min.js"></script>
    <title>Snack Bar</title>
    <style type="text/css">
        ul{list-style:none;}
    </style>
</head>
<body ng-controller="myCtrl">

<div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="/" ng-click = "getAll();">Snack Bar</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li><a href="/" ng-click = "getAll();">首页</a></li>
                <li><a href="/messages">留言</a></li>
                <li class="active"><a href="/tallybook">欠账本</a></li>
                <li><a href="/contact">关于</a></li>
              </ul>
            </div>
          </div>
        </nav>

      </div>
</div>

<div class="snackcontainer">
  <div class="col-md-12">
    <form class="form-inline" name="form">
      <div class="form-group">
        <label for="bill">欠账金额：</label>
        <input type="number" name="bill" class="form-control" ng-min="0.1" ng-model="billsdue" placeholder="￥" integer required/>
        <label for="bill">备注：</label>
        <input type="text" class="form-control" id="tally" ng-model="note" placeholder="零食名称、数量" required></input>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary" ng-click="postTally();">记一笔</button>
      </div>
      <span class="alert alert-danger well-sm" ng-show="form.bill.$error.min">金额不能小于等于零！</span>
      <span ng-class="{true:'alert alert-danger',false:'alert alert-success'}[isBillEmpty]" ng-show="isBillEmpty">请输入正确的金额信息！</span>
      <span ng-class="{true:'alert alert-danger',false:'alert alert-success'}[isNoteEmpty]" ng-show="isNoteEmpty">请输入备注信息！</span>
    </form>
</div>

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-12">
    <ul class="">
      <div class="tallyheader">
        <strong>{{username}}的欠账</strong>
      </div>
      <table class="table table-hover">
         <tr> 
          <th>金额</th>
          <th>备注</th>
          <th>日期</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
        <tr>
          <td>未付款总计：￥{{getTotal()}} </td>
          <td></td>
          <td></td>
          <td></td>
          <td> <button type="submit" class="btn btn-primary" ng-disabled="alreadypay(getTotal());" data-toggle="modal" data-target="#about-modal-batch">一次付款</button></td>
          <div class="modal fade" id="about-modal-batch" tabindex="-1" role="dialog" aria-labelledby="modal-label"
                 aria-hidden="true">
              <div class="modal-dialog" >
                  <div class="modal-content" style="width:500px;">
                      <div class="modal-header" align="center">
                          <button type="button" class="close" data-dismiss="modal"><span
                                  aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                          <h4 class="modal-title" id="modal-label">请用手机支付宝扫描以下二维码，支付￥{{getTotal()}}</h4>
                      </div>
                      <div class="modal-body" align="center">
                        <img src="./images/alipay.jpg">
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="payonetime();">支付完成</button>
                      </div>
                  </div>
              </div>
          </div>
        </tr>
        <tr ng-repeat="i in tallyList|orderBy:order">
          <td>
            ￥{{i.billhistory}}
          </td>
          <td>
            {{i.note}}
          </td>
          <td>
            {{i.date|date:'yyyy-MM-dd HH:mm:ss'}}
          </td>
           <td style="font-family:verdana;color:red">
            <strong>{{i.pay}}</strong>
          </td>
          <td>
             <button type="submit" class="btn btn-primary" ng-disabled="alreadypay(i.billsdue);" data-toggle="modal" data-target="#about-modal">付款</button>
          </td>
          <td>
            <div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="modal-label"
                 aria-hidden="true">
              <div class="modal-dialog">
                  <div class="modal-content" style="width:500px;">
                      <div class="modal-header" align="center">
                          <button type="button" class="close" data-dismiss="modal"><span
                                  aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                          <h4 class="modal-title" id="modal-label">请用手机支付宝扫描以下二维码，支付￥{{i.billhistory}}</h4>
                      </div>
                      <div class="modal-body" align="center">
                          <img src="./images/alipay.jpg">
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="pay(i)">支付完成</button>
                      </div>
                  </div>
              </div>
          </div>
        </td>
        </tr>
        
      </table>
    </ul>
</div>
</div>
</div>

<script>
  var app=angular.module("app",[], function () {
      console.log('started');
  });
      
  app.controller("myCtrl",function($scope,$http){
      $http.get("/session").success(function(response){
      if(response&&response.user) {
        $scope.username = response.user.name;
        $http.get("/tally/tally/"+$scope.username).success(function(response){
          $scope.tallyList = response;
          $scope.order = "-date";
        });
        if (response.user.type=="Admin") {
          $scope.isAdmin = true;
        }
        $scope.showLogout = true;
        $scope.showLogin = false;
      } else {
        $scope.showLogin = true;
      }
    });

      $scope.postTally = function(){
      $scope.isNoteEmpty = ($scope.note=="" ||  $scope.note==null) ? true:false;
      $scope.isBillEmpty = ($scope.billsdue=="" || $scope.billsdue==null) ? true:false;
    	if($scope.username!=null& !$scope.isNoteEmpty && !$scope.isBillEmpty){       
    		 $http({
                 method  : 'post',
                 url     : '/tally/tally',
                 data    : {
                   user : $scope.username,
                   billsdue : $scope.billsdue,
                   billhistory : $scope.billsdue,
                   note : $scope.note,
                   date : Date.parse(new Date())
                 }
             })
               .success(function(data) {
                   // if successful, bind success message to message
                  // $scope.message = data.message;
                   $http.get("/tally/tally/"+$scope.username).success(function(response){
                     $scope.tallyList = response;
                     $scope.order = "-date";
                   });
                   $scope.billsdue="";
                   $scope.note="";
               })
    	}
      };

      $scope.getTotal = function(){
        var total = 0;
        if ($scope.tallyList) {
          for(var i = 0; i < $scope.tallyList.length; i++){
            var tally = $scope.tallyList[i];
            total += tally.billsdue;
          }
        }
        return total;
      };

      $scope.pay = function(record){
             $http({
                    method  : 'put',
                    url     : '/tally/tally/pay/'+ record._id
                })
                    .success(function(data) {
                        if (!data.success) {
                          alert("can not update snack love");
                        } else {
                             $http.get("/tally/tally/"+$scope.username).success(function(response){
                              $scope.tallyList = response;
                              $scope.order = "-date";
                            });
                        }
                    });
      };

      $scope.payonetime = function(){
        if ($scope.tallyList) {
        for(var i = 0; i < $scope.tallyList.length; i++){
             $scope.pay($scope.tallyList[i]);
          }
        }
      }; 

       $scope.alreadypay = function(record){
          if(record==0){
            return true;
          }
        return false;
      }; 
  });
</script>

<!-- FOOTER -->
<footer class="footer">
  <p>&copy; 2015 Company, Inc. &middot; Powered By &middot; <a href="https://nodejs.org/">Nodejs</a></p>
</footer>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>